import React, { useState, useEffect } from "react";
import ReactEcharts from "echarts-for-react";
import ChartsWrap from "components/charts/chartsWrap";
import echarts from "echarts";
import { formatUnits, numberToFixed } from "../../../utils/billUtils";

var colorList = [
  "#afa3f5",
  "#00d488",
  "#3feed4",
  "#3bafff",
  "#f1bb4c",
  "#f06292",
  "#ff80ab",
  "#f44336",
  "#00bcd4",
  "#009688",
  "#40c4ff",
  "#18ffff",
  "#18ffff",
  "#69f0ae",
  "#b2ff59",
  "#eeff41",
  "#00e676",
  "#76ff03",
  "#c6ff00"
];

function filterDataByWeek(data) {
  const billData = new Array(7);
  data.forEach(item => {
    const date = new Date(item.createdTime);
    const index = date.getDay();
    billData[index]
      ? (billData[index] += item.price)
      : (billData[index] = item.price);
  });
  // 将星期天的放在最后
  let temp = billData.shift();
  billData.push(temp);
  return billData;
}

function filterDataByYear(data) {
  const billData = new Array(12);
  data.forEach(item => {
    const date = new Date(item.createdTime);
    const index = date.getMonth();
    billData[index]
      ? (billData[index] += item.price)
      : (billData[index] = item.price);
  });
  return billData;
}

function filterDataByMonth(data) {
  const nowDate = new Date();
  const billLabel = [];
  const billData = [];
  let year = nowDate.getFullYear();
  let month = nowDate.getMonth();
  let minDate = new Date(year, month);
  let maxDate = new Date(year, month + 1);
  let monthDay = (maxDate - minDate) / 1000/60/60/24;
  for(let i = 0; i < monthDay; i++) {
    billLabel.push(`${i + 1}日`);
  }
  
  data.forEach(item => {
    const date = new Date(item.createdTime);
    const index = date.getDate();
    billData[index]
      ? (billData[index] += item.price)
      : (billData[index] = item.price);
  });

  return { billData, billLabel };
}

const LineChart = ({
  title = "数据展示",
  type = "week",
  name = "",
  data = []
}) => {
  const [labelData, setLabelData] = useState([]);
  const [lineData, setLineData] = useState([]);

  useEffect(() => {
    switch (type) {
      case "week": {
        const res = filterDataByWeek(data);
        setLabelData(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
        setLineData(res);
        break;
      }
      case "month": {
        const res = filterDataByMonth(data);
        setLineData(res.billData);
        setLabelData(res.billLabel);
        break;
      }
      case "year": {
        const res = filterDataByYear(data);
        setLabelData([
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月"
        ]);
        setLineData(res);
        break;
      }
    }
  }, [data]);

  const getOption = data => {
    return {
      tooltip: {
        show: true,
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      toolbox: {
        feature: {
          saveAsImage: {
            show: true,
            name: title,
            pixelRatio: 2
          },
          dataView: {}
        }
      },
      grid: {
        top: "8%",
        left: "1%",
        right: "1%",
        bottom: "8%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#555"
            }
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: "#555",
              margin: 15
            }
          },
          axisTick: {
            show: false
          },
          data: labelData
        }
      ],
      yAxis: [
        {
          name: "金钱(单位：元)",
          type: "value",
          // max: 140,
          splitNumber: 7,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#dbdbdb"
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            margin: 0,
            textStyle: {
              color: "#555"
            }
          },
          axisTick: {
            show: false
          }
        }
      ],
      series: [
        // {
        //   name: "注册总量",
        //   type: "line",
        //   // smooth: true, //是否平滑曲线显示
        //   // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        //   showAllSymbol: true,
        //   symbol: "emptyCircle",
        //   symbolSize: 6,
        //   lineStyle: {
        //     normal: {
        //       color: "#1de9b6" // 线条颜色
        //     },
        //     borderColor: "#f0f"
        //   },
        //   label: {
        //     show: true,
        //     position: "top",
        //     textStyle: {
        //       color: "#fff"
        //     }
        //   },
        //   itemStyle: {
        //     normal: {
        //       color: "#28ffb3"
        //     }
        //   },
        //   tooltip: {
        //     show: false
        //   },
        //   areaStyle: {
        //     //区域填充样式
        //     normal: {
        //       //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
        //       color: new echarts.graphic.LinearGradient(
        //         0,
        //         0,
        //         0,
        //         1,
        //         [
        //           {
        //             offset: 0,
        //             color: "rgba(46, 220, 146, .1)"
        //           },
        //           {
        //             offset: 1,
        //             color: "rgba(0,0,0,0)"
        //           }
        //         ],
        //         false
        //       ),
        //       shadowColor: "rgba(53,142,215, 0.3)", //阴影颜色
        //       shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        //     }
        //   },
        //   data: lineData
        // },
        {
          name: name,
          type: "bar",
          barWidth: 20,
          tooltip: {
            show: true
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#555"
            }
          },
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#0ec1ff"
                },
                {
                  offset: 1,
                  color: "#1dfff1"
                }
              ])
            }
          },
          data: lineData
        }
      ]
    };
  };

  return (
    <ChartsWrap title={title} data={data}>
      <ReactEcharts option={getOption(data)} />
    </ChartsWrap>
  );
};

export default LineChart;
